import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
} from '@ant-design/pro-form';
import { Card } from 'antd';
import React, { useRef } from 'react';

const Save = () => {
  // 绑定一个 ProFormInstance 实例
  const formRef = useRef<
    ProFormInstance<{
      date: string;
    }>
  >();

  const handleSubmit = async (formData: any) => {
    // formRef.current?.validateFields();
    console.log('提交表单: ', formData);
    return false;
  };

  return (
    <Card>
      <ProForm
        onFinish={handleSubmit}
        style={{
          maxWidth: 800,
          margin: '0 auto',
        }}
        layout="horizontal"
        wrapperCol={{
          span: 24,
        }}
        labelCol={{
          span: 4,
        }}
        onValuesChange={async () => {
          formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
            // 以下为格式化之后的表单值
            console.log(val.date);
          });
        }}
        // 通过formRef进行绑定
        formRef={formRef}
      >
        <ProFormText label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]} />
        <ProFormTextArea label="描述" name="description" rules={[{ required: true, message: '请输入描述' }]} />
        <ProFormUploadButton label="封面图" name="picture" rules={[{ required: true, message: '请上传封面图' }]} />
        <ProFormSelect
          name="job"
          label="职位"
          options={[
            { label: '前端', value: '前端' },
            { label: '后端', value: '后端' },
            { label: '测试', value: '测试' },
            { label: '运维', value: '运维' },
          ]}
          rules={[{ required: true, message: '请选择职位' }]}
        />
      </ProForm>
    </Card>
  );
};

export default Save;
